<script>
import TreeDirectoryItem from '@/views/tools/generate/TreeDirectory/TreeDirectoryItem.vue'

export default {
  name: 'TreeDirectory',
  components: { TreeDirectoryItem },
  props: {
    tree: {
      type: Array
    },
    active: {
      type: String
    }
  },
  data() {
    return {
      innerActive: null
    }
  },
  watch: {
    active: {
      handler(value) {
        this.innerActive = value
      },
      immediate: true
    },
    innerActive(value) {
      this.$emit('update:active', value)
    }
  },
}
</script>

<template>
  <details class="eu-directory" open>
    <summary>
      <span class="tree-item">EuBackend</span>
    </summary>
    <tree-directory-item
      v-for="(item, index) in tree"
      :key="index"
      :item="item"
      :active.sync="innerActive"
    />
  </details>
</template>

<style scoped lang="scss">
@import "~@/assets/styles/mixin.scss";
.eu-directory {
  width: 200px;
  overflow: auto;
  color: var(--theme-nav-first-color);
  font-size: 14px;
  user-select: none;
  @include scrollBarX;

  ::v-deep {
    details {
      padding-left: 10px;

      &[open]>summary {
        background-image: url("");
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: left center;

        &:only-child {
          background: unset;
        }

        &:not(:only-child) {
          &>.tree-item::before {
            background-image: url("");
          }
        }
      }
    }
    summary{
      list-style: none;
      background-image: url("");
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: left center;
      cursor: pointer;
      //padding-left: 20px;

      line-height: 2em;
      border-radius: 4px;
      margin-bottom: 2px;

      &:only-child {
        background: unset;
        .tree-item {
          &::before {
            content: '';
            background-image: url('');
          }
          // 多图标
          &.folder_js::before {
            background-image: url('');
          }
          &.folder_java::before {
            background-image: url('');
          }
          &.folder_xml::before {
            background-image: url('');
          }
          &.folder_vue::before {
            background-image: url('');
          }
          &.folder_sql::before {
            background-image: url('');
          }
        }
      }

      &:hover {
        background-color: var(--theme-nav-first-hover-bg) !important;
        color: var(--theme-nav-first-hover-color);
      }

      &.active {
        background-color: var(--theme-nav-first-active-bg) !important;
        color: var(--theme-nav-first-active-color);
      }
    }
    .tree-item {
      padding-left: 22px;
      white-space: nowrap;

      &::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url("");
        background-size: 1.2em;
        background-repeat: no-repeat;
        background-position: left center;
        vertical-align: middle;
      }
    }
  }
}
</style>
